<template>
  <div id="MainPage">
    <el-container style="height: 100vh;">
      <el-header>
        <div class="logo">
          xx科技
          <!-- <img src="../assets/logo.png" alt=""> -->
        </div>
        <el-dropdown style="float:right;">
          <i class="" style="margin-right: 15px;color: #FFF;font-style: normal;">王小虎</i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-header>
      
      <el-container style="height: 200px;">
        <!-- 侧边导航 -->
        <el-aside width="200px" style="background-color: #2A2A2A">
          <!-- <el-scrollbar> -->
          <happy-scroll 
            color="rgba(151,151,151,0.3)" 
            size="8" resize
            :min-length-v="0.15"
            :scroll-top.sync="asideScrollTop"
          >
              <!-- :default-active="leftMenuAct" -->
            <el-menu
              class="el-menu-vertical-demo"
              router
              @open="handleOpen"
              @close="handleClose" 
              :collapse="!isCollapse"
              background-color="#2A2A2A"
              text-color="#AEBBBB"
              active-text-color="#FFF">
              <el-submenu index="1">
                <template slot="title">
                  <i class="el-icon-menu"></i>
                  <span>内容管理</span>
                </template>
                <el-menu-item-group>
                  <el-submenu index="/manage/class">
                    <template slot="title">分类管理</template>
                    <el-menu-item index="/manage/managetype" route="/manage/managetype">一级分类</el-menu-item>
                    <el-menu-item index="/manage/manageclass" route="/manage/manageclass">二级分类</el-menu-item>
                  </el-submenu>
                </el-menu-item-group>
                <el-menu-item-group>
                  <el-menu-item index="/manage/managetel" route="/manage/managetel">号码管理</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
              <el-menu-item index="2" route="/manage/user">
                <i class="el-icon-document"></i>
                <span slot="title">用户管理</span>
              </el-menu-item>
              <el-menu-item index="3">
                <i class="el-icon-s-tools"></i>
                <span slot="title">网站设置</span>
              </el-menu-item>
              <!-- <el-menu-item index="4" disabled>
                <i class="el-icon-setting"></i>
                <span slot="title">导航四</span>
              </el-menu-item> -->
            </el-menu>
          <!-- </el-scrollbar> -->
          </happy-scroll>
        </el-aside>
        <el-main>
          <div ref="content" style="height:100%">
            <div ref="content_bread">
              <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/' }"><i class="el-icon-location"></i> 首页</el-breadcrumb-item>
                <el-breadcrumb-item>活动管理</el-breadcrumb-item>
                <el-breadcrumb-item>活动列表</el-breadcrumb-item>
                <el-breadcrumb-item>活动详情</el-breadcrumb-item>
              </el-breadcrumb>
            </div>
            <div class="component-box" :style="{height:componentHe}">
              <!-- 内容页 -->
              <router-view></router-view>
            </div>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>


export default {
  name: 'MainPage',
  data () {
    
    return {
      // 侧边导航滚动条距离顶部高度
      asideScrollTop: 0,
      // 分页参数
      formConfig:{
        current: 1,
        length: 299,
        pagesizes: [20, 50, 100, 200],
        pagesize: 50
      },
      // 内容盒子高度
      componentHe: '500px',
      // 侧边导航参数
      isCollapse: true,
      activeIndex: '',
      leftMenuAct: '/manage/managetel',
    }
  },
  methods: {
    handleOpen(key, keyPath) {
      // console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    getComponentHe(){
      var contentHe = this.$refs.content.offsetHeight;
      var content_breadHe = this.$refs.content_bread.offsetHeight;
      this.componentHe = (contentHe - content_breadHe)+"px";
    }
  },
  mounted(){
    this.$nextTick(()=>{ // 页面渲染完成后的回调
      this.getComponentHe();
      setTimeout(() => { this.getComponentHe(); }, 1000);
    })
    window.addEventListener('resize',this.getComponentHe,false)
  },
  created(){
    
  },
  components:{
    // "paging": paging,
  }
}
</script>
<style>
  .logo{
    display: flex;
    align-items: center;
    justify-content: center;
    float: left;
    height: 100%;
    width: 200px;
    color: #F8F8F8;
    font-size: 24px;
    font-weight: 400;
  }
  .logo img{
    display: block;
    max-width: 90%;
    max-height: 80%;
  }

  /* // 组件高度（ 面包屑上下边距加高度：15*2+14 ） */
  .component-box{
    height: calc(100% - 44px);
  }
 
</style>

